<template>
	<view class="">
		<view class="pages" v-if="isshowimg">
			<image src="/static/logo.png" mode=""></image>
		</view>
		<searchTop :isdwopen='isdwopen' :address="address" @openpop='openpop'></searchTop>
		<view v-if="isshowpop" @click="isshowpop=false" class="abssj" :style="{top:safeTop}">
			<view class="abssjs">
				<view class="abss_1">
					<view class="flex_b flex_l">
						<uni-icons size="17" type="paperplane-filled" color="#fff"></uni-icons>
						<view class="items">
							{{address?address:'定位中...'}}
						</view>
					</view>
					<view class="flex_b btn" @click="getlocat">
						<uni-icons size="13" type="navigate-filled" color="#fff"></uni-icons>
						<view class="" style="margin-left: 6rpx;">
							定位
						</view>
					</view>
				</view>
				<view class="abss_2">
					<view class="items" v-for="(item,index) in addressList" :key="index" @click="changeAddress(item)">
						<view class="flex_b">
							<uni-icons size="17" type="plus-filled" color="#fff"></uni-icons>
							<view class="test">
								{{ item.province }}{{ item.city }}{{ item.county }}-{{ item.address }}
							</view>
						</view>
						<view class="" @click.stop="removeAddress(item,index)">
							<uni-icons size="17" type="close" color="#fff"></uni-icons>
						</view>
					</view>
					<view class="items" v-if="addressList.length==0 ||addressList.length<2">
						<view class="flex_b" @click.stop="pageaddcity">
							<uni-icons size="17" type="plus-filled" color="#fff"></uni-icons>
							<view class="test">
								添加快捷地址
							</view>
						</view>
					</view>
				</view>
				<view class="abss_3" @click="pagecity">
					<uni-icons type="location-filled" size="17" color="#fff"></uni-icons>
					<view class="test">
						切换城市
					</view>
				</view>
			</view>
		</view>
		<view class="addresskong" v-if="!isdwopen">
			<view class="">
				<image src="../../static/icon/ddw.png" mode=""></image>
				<view class="t1">
					定位服务未开启
				</view>
				<view class="t2">
					请在【设置-应用权限】中打开微信位置权限，我们将为您展示附近的余量实物
				</view>
				<view class="btn" @click="openweizhi">
					开启定位权限
				</view>
			</view>
		</view>
		<scroll-view v-else class="content" :refresher-enabled='true' scroll-y="true"
			:style="{height:`calc(100vh - ${safeTop})`}" @scrolltolower='onbottom' @refresherrefresh='refresherrefresh'
			:refresher-triggered='istrue'>
			<view class="swiper">
				<swiper :indicator-dots="true" circular :autoplay="true" :interval="5000" :duration="1000">
					<swiper-item v-for="(item,index) in bannerList" :key="index">
						<view class="swiper-item" @click="pagelingjuan(item)">
							<image :src="item.img" mode=""></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<scroll-view class="flexs" scroll-x enable-flex>
				<view class="x_item" v-for="(item,index) in categoryList" :key="index" @click="pagefj(item.code,index)">
					<image :src="item.icon" mode=""></image>
					<view class="text">{{item.code}}</view>
				</view>
			</scroll-view>
			<view class="newshop" v-if="newshopList.length!=0">
				<view class="new_tit">
					<view class="new_l">
						<image src="/static/icon/n.png" mode=""></image>
						<view class="t1">新上线 </view>
						<view class="t2">新店上线，优惠多多，快来抢购吧~</view>
					</view>
					<image @click="$pageGo('/mainpage/newshop')" class="imgr" src="/static/icon/r.png" mode=""></image>
				</view>
				<scroll-view class="priceflexs" scroll-x enable-flex>
					<view class="price_item" v-for="(item,index) in newshopList.slice(0,5)" :key="index"
						@click="pageDetail(item.productList[0].id,item.distanceString)">
						<view class="img" v-if="item.productList[0]">
							<image lazy-load :src="item.productList[0].img.split(',')[0]" mode="aspectFill"></image>
							<view class=""
								v-if="item.productList[0].sellStop != 1 && item.productList[0].status =='UP'">
								<view class="tip" v-if="item.productList[0].count <=5">仅剩{{item.productList[0].count}}份
								</view>
								<view class="tip" v-else>剩5份+</view>
								<view class="time">
									<image src="../../static/icon/z.png" mode=""></image>
									今天{{item.productList[0].takeTimeBegin.substring(0,5)}}-{{item.productList[0].takeTimeEnd.substring(0,5)}}
								</view>
							</view>
							<view class="time1"
								v-if="item.productList[0].sellStop == 1 || item.productList[0].status !='UP'">
								<view class="tflex1" v-if="item.productList[0].sellStop == 1">
									<image src="../../static/icon/k.png" mode=""></image>
									<view class="">
										已售罄
									</view>
								</view>
								<view class="tflex1" v-if="item.productList[0].status !='UP'">
									<image src="../../static/icon/x1.png" mode=""></image>
									<view class="">
										未上架
									</view>
								</view>
								<view class="tflex">
									<image src="../../static/icon/z.png" mode=""></image>
									今天{{item.productList[0].takeTimeBegin.substring(0,5)}}-{{item.productList[0].takeTimeEnd.substring(0,5)}}
								</view>
							</view>
						</view>
						<view class="text">{{item.shopName}}</view>
						<view class="DINB">
							<span class="ic">￥</span>{{item.productList[0].price}}
							<span class="FINE"
								style="margin-left: 10rpx;">￥{{item.productList[0].priceOldBegin}}-{{item.productList[0].priceOldEnd}}
							</span>
						</view>
						<view class="block_flex">
							<view class="block_l">
								<span class="t1">{{item.rating}}</span>
								<image src="/static/icon/x.png" mode=""></image>
								<span class="t2">({{item.replyCount>99?item.replyCount+'+':item.replyCount}})</span>
							</view>
							<view class="block_r">
								<image src="../../static/icon/dw.png" mode=""></image>
								<span>{{item.distanceString}}</span>
							</view>
						</view>
					</view>
					<view class="ts" @click="$pageGo('/mainpage/newshop')" v-if="newshopList.length>5">
						查看更多
						<uni-icons style="margin-top: 10rpx;" color="#000000" size='16' type="right"></uni-icons>
					</view>
				</scroll-view>
			</view>
			<view class="tj_shop" v-if="hotshoplist.length!=0">
				<view class="title">
					<image src="../../static/icon/d.png" mode=""></image>
					<view class="">
						伊可库推荐商家
					</view>
				</view>
				<!-- 三种情况 一个商品 二个商品 多个商品 -->
				<view class="shop" v-for="(item,index) in hotshoplist" :key="index"
					@click="$pageGo(`/mainpage/shopdetail?id=${item.id}`)">
					<view class="shoptit">
						<view class="">{{item.shopName}}</view>
						<view class="x"></view>
						<view class="block_flex">
							<view class="block_l">
								<span class="t1">{{item.rating}}</span>
								<image src="/static/icon/x.png" mode=""></image>
								<span class="t2">({{item.replyCount>99?item.replyCount+'+':item.replyCount}})</span>
							</view>
							<view class="block_r">
								<image src="../../static/icon/dw.png" mode=""></image>
								<span>{{item.distanceString}}</span>
							</view>
						</view>
					</view>
					<view class="shopflex">
						<view class="price_item" v-for="(its,i) in item.productList.slice(0,islength)" :key="i"
							@click.stop="pageDetail(item.productList[i].id,item.distanceString)">
							<view class="img">
								<image lazy-load :src="its.img.split(',')[0]" mode="aspectFill"></image>
								<view class="" v-if="its.sellStop != 1 && its.status =='UP'">
									<view class="tip" v-if="its.count <=5">仅剩{{its.count}}份</view>
									<view class="tip" v-else>剩5份+</view>
									<view class="time">
										<image src="../../static/icon/z.png" mode=""></image>
										今天{{its.takeTimeBegin.substring(0,5)}}-{{its.takeTimeEnd.substring(0,5)}}
									</view>
								</view>
								<view class="time1" v-if="its.sellStop == 1 || its.status !='UP'">
									<view class="tflex1" v-if="its.status !='UP'">
										<image src="../../static/icon/x1.png" mode=""></image>
										<view class="">
											未上架
										</view>
									</view>
									<view class="tflex1" v-else-if="its.sellStop == 1">
										<image src="../../static/icon/k.png" mode=""></image>
										<view class="">
											已售罄
										</view>
									</view>

									<view class="tflex">
										<image src="../../static/icon/z.png" mode=""></image>
										今天{{its.takeTimeBegin.substring(0,5)}}-{{its.takeTimeEnd.substring(0,5)}}
									</view>
								</view>
							</view>
							<view class="text">{{its.productName}}</view>
							<view class="DINB">
								<span class="ic">￥</span>{{its.price}}
								<span class="FINE"
									style="margin-left: 10rpx;">￥{{its.priceOldBegin}}-{{its.priceOldEnd}}</span>
							</view>
							<view class="tipflex">
								<view class="its" v-for="i in its.category.split(',')" :key="i">{{i}}</view>
							</view>
							<view class="plun">
								<image :src="its.comment.userHead?its.comment.userHead:'/static/toux.png'" mode="">
								</image>
								<view class="tts">{{its.comment.content?its.comment.content:"暂无评价"}}
								</view>
							</view>
						</view>
						<view class="leg1rig" v-if="item.productList.length == 1">
							<image src="../../static/bcg.png" mode=""></image>
							<view class="tflex">
								进店查看
								<uni-icons color='#A37D73' type="right"></uni-icons>
							</view>
						</view>
					</view>
					<view class="check" v-if="item.productList.length > 2"
						@click.stop="change(item.productList.length)">
						<view class="">
							<span v-if="checkAll">查看更多</span>
							<span v-else>收起</span>
							<uni-icons size='16' color="#979797" :type="checkAll?'down':'top'"></uni-icons>
						</view>
					</view>
				</view>
			</view>
			<view class="" v-if="hotshoplist.length==0&&newshopList.length==0">
				<view class="twokong">
					<view class="tits" style="display: flex;justify-content: center;">
						<view class="tit">
							<image src="/static/city.png" mode=""></image>
							当前城市暂未开通
						</view>
					</view>
					<view class="text">
						让绿色生活成为日常「伊可库」专注于构建一个关注环保与可持续生活方式的小程序平台，将绿色理念巧妙融入人们的日常生活。我们坚信，每一个微小的行动都能汇聚成推动地球变革的巨大力量——无论是减少一次性用品的使用，还是减少食物浪费，每一次努力都是守护地球的绿色贡献。我们的使命是：将环保转化为一种时尚、便捷的生活态度，而非仅仅是口头上的倡导。余光行动，从您开始!
					</view>
				</view>
				<view class="k34">
					<view class="">
						<view class="kflexl">
							<view class="kflexl">
								<image src="/static/icon/ql.png" mode=""></image>
								<view class="">
									福利群
								</view>
							</view>
							<view class="lyh">
								领优惠
							</view>
						</view>
						<view class="test">
							加入福利群，领取超多优惠
						</view>
					</view>
					<view class="rimg">
						<image show-menu-by-longpress :src="imgInfo.kfCode" mode=""></image>
					</view>
				</view>
			</view>
			<view class="" style="height: 160rpx;"></view>
		</scroll-view>

		<view class="pop" v-if="istake">
			<view class="popflex" @click="openDaiqucan">
				<image src="../../static/b.png" mode=""></image>
				<view class="texts">
					<view class="" style="width: 46rpx;"></view>
					<view class="">
						<view class="t1">
							有 <span>{{takeInfo.count}}</span> 个待取餐
						</view>
						<view class="t2">
							<span>{{takeInfo.endTime}}</span>前
						</view>
					</view>
				</view>
			</view>
		</view>
		<clearts ref="popupts"></clearts>
		<uni-popup :safe-area='false' ref="popup" type="bottom">
			<view class="popupcss">
				<image class="imgabs" src="../../static/b.png" mode=""></image>
				<view class="title">
					您有{{takeInfo.count}}个待取餐
				</view>
				<view class="swiper">
					<swiper @change='swiperChange' :current='current'>
						<swiper-item v-for="(item,index) in takeList" :key="index">
							<view class="swiper-item">
								<view class="imgpre">
									<image src="../../static/icon/ju.png" mode=""></image>
									<view class="textpoa">
										<view class="t1">
											取餐码
										</view>
										<view class="t2">{{item.takeCode}}</view>
										<view class="t3">
											请到店使用取餐码取餐
										</view>
									</view>
								</view>
								<view class="iconflex">
									<view class="left">
										<image src="../../static/dp.png" mode=""></image>
										{{item.shopName}} - {{item.productName}}
									</view>
									<view class="right">
										<image src="../../static/icon/dh.png" mode=""
											@click="$opennavigation(item.shop)"></image>
										<image src="../../static/icon/sj.png" mode=""
											@click="$phoneCall(item.shop.shopPhone)"></image>
									</view>
								</view>
								<countdown @opents='opents' v-if='item.takeTimeBegin' :timeBegin='item.takeTimeBegin'
									:timeEnd="item.takeTimeEnd"></countdown>
								<view class="address">
									<view class="">
										取餐地址：{{item.shop.address}}
									</view>
									<view class="" style="color: #29A85C;">
										距离您{{item.shop.distanceString}}
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
					<view class="btnflex">
						<view class="btn b1" @click="close(1)">
							关闭
						</view>
						<view class="btn b2" @click="openQueren">
							确认取餐
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupyes" type="center">
			<view class="popupyes">
				<view class="images">
					<image src="../../static/popup.png" mode=""></image>
					<view class="imageabs">
						<image src="../../static/orderi1.png" mode=""></image>
						<view class="t1">
							期待您的下次光临~
						</view>
						<view class="ts">
							<view class="we">
								成功减碳 <span>15</span> g，已保护地球<span>15</span>天
							</view>
							<view class="t"></view>
						</view>
						<view class="btn" @click="close(2)">
							我知道了
						</view>
					</view>

				</view>
				<view class="close" @click="close(2)">
					<uni-icons size="40" color="#fff" type="close"></uni-icons>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupaddress" type="center">
			<view class="popup">
				<view class="tit">删除快捷地址</view>
				<view class="cont">{{addressRemove}}</view>
				<view class="btnflex">
					<view class="btn b1" @click="close(3)">
						取消
					</view>
					<view class="btn b2" @click="handleConfirm">
						确认
					</view>
				</view>
			</view>
		</uni-popup>
		<uv-tabbar :value="0" class="tab"></uv-tabbar>
	</view>
</template>

<script>
	import {
		getbanner,
		getcategoryList,
		getnewsShop,
		gethotsShop,
		addressList,
		addressRemove,
		ordersWaittake,
		orderstake,
		getimg
	} from '@/common/http.api.js';
	import QQMapwx from '@/minxins/amap-wx.130.js'
	export default {
		data() {
			return {
				istrue: true, //下拉
				bannerList: [], //轮播图
				categoryList: [], //分类
				params: {
					pageNum: 1,
					pageSize: 10
				},
				newshopList: [],
				hotshoplist: [],
				checkAll: true, //点击查看全部
				islength: 2,
				isshowimg: true, //开屏前加载页
				nolist: false,
				address: '', //地址
				addressList: [], //快捷地址
				isdwopen: true, //定位页面效果
				safeTop: uni.getStorageSync('statusBarHeight'),
				popup: {}, //多个弹窗
				addressRemove: '',
				addressId: '',
				istake: false, //待取餐
				takeInfo: {},
				takeList: [],
				takeId: '',
				current: 0,

				isjump: true, //控制切换城市重复请求


				//头部属性相关
				isshowpop: false, //显示定位
				imgInfo: {}
			}
		},
		watch: {
			address(nval) {
				if (this.isjump) {
					this.params.pageNum = 1
					this.newshopList = []
					this.hotshoplist = []
					this.params = Object.assign(this.params, uni.getStorageSync('address'))
					getnewsShop(this.params).then(res => {
						this.newshopList = res.rows
					})
					this.getshoplist()
				}
			}
		},
		onShareAppMessage(res) {
			return {
				title: '伊可库欢迎你！',
				path: `/pages/index/index`,
			}
		},
		onShareTimeline(res) {
			return {
				title: '伊可库欢迎你！',
				path: `/pages/index/index`,
			}
		},
		onHide() {
			this.isshowpop = false
		},
		onLoad() {
			getimg({}).then(res => {
				this.imgInfo = res.data
			})
			this.initialfun()
			getbanner({}).then(res => {
				this.bannerList = res.data
			})
			getcategoryList({}).then(res => {
				this.categoryList = res.data
			})
		},
		onShow() {
			let that = this
			if (uni.getStorageSync('userToken')) {
				addressList({}).then(res => {
					that.addressList = res.rows
				})
				ordersWaittake({
					latitude: uni.getStorageSync('address').latitude,
					longitude: uni.getStorageSync('address').longitude
				}).then(res => {
					if (res.data.count != 0) {
						that.istake = true
						that.takeInfo = res.data
					}
				})
			}
			that.address = uni.getStorageSync('address').address
		},
		methods: {
			//接受方法 展示或者隐藏定位
			openpop() {
				this.isshowpop = !this.isshowpop
			},
			//下拉
			refresherrefresh() {
				this.istrue = true
				this.params.pageNum = 1
				this.checkAll = true
				this.islength = 2
				this.newshopList = []
				this.hotshoplist = []
				this.params = Object.assign(this.params, uni.getStorageSync('address'))
				getnewsShop(this.params).then(res => {
					this.newshopList = res.rows
				})
				this.getshoplist()
			},
			//删除地址
			removeAddress(item, index) {
				this.addressId = item.id
				this.addressRemove = item.address
				this.$refs.popupaddress.open()
			},
			//删除确认
			handleConfirm() {
				addressRemove({
					id: this.addressId
				}).then(res => {
					addressList({}).then(res => {
						this.addressList = res.rows
					})
					this.$refs.popupaddress.close()
				})
			},
			//检测是否开始定位权限
			initialfun() {
				let that = this
				that.isjump = false
				uni.getSetting({
					success: (res) => {
						if (!res.authSetting['scope.userLocation']) {
							// 未授权，进行授权请求
							this.isshowimg = false
							this.isdwopen = false
							this.address = ''
						} else {
							// 已授权，直接获取位置信息
							this.getlocat()
						}
					}
				})
			},
			//打开定位服务
			openweizhi() {
				uni.authorize({
					scope: 'scope.userLocation',
					success: () => {
						//重新获取权限并判断
						this.getlocat()
					},
					fail: (res) => {
						uni.showModal({
							title: '使用该功能必须允许位置服务，是否重新授权？',
							showCancel: false,
							success: ({
								confirm
							}) => {
								if (confirm) {
									uni.openSetting({
										success: (response) => {
											if (response.authSetting[
													'scope.userLocation']) {
												// 重新获取定位
												this.getlocat()
											} else {}
										},
										fail: () => {}
									})
								}
							},
						})
					},
				})
			},
			//获取当前定位 刷新数据
			getlocat() {
				let that = this
				that.isdwopen = true
				uni.getLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					altitude: true,
					success: function(res) {
						let obj = {
							longitude: res.longitude,
							latitude: res.latitude,
						}
						that.getinitial(obj)
					},
					fail: (err) => {
						console.log(err);
					}
				});
			},
			//更新商家列表 传经纬度
			getinitial(jwd) {
				let that = this
				const qqmapsdk = new QQMapwx.AMapWX({
					key: 'fec30c445693bf6e07f0c753a07d9667'
				})
				qqmapsdk.getRegeo({
					location: jwd.longitude + ',' + jwd.latitude,
					success: (res) => {
						let u = res[0].regeocodeData.addressComponent
						let obj = {
							address: u.streetNumber.street + u.streetNumber.number,
							longitude: jwd.longitude,
							latitude: jwd.latitude,
							province: u.province,
							city: u.city.length == 0 ? u.province : u.city,
							// county:u.district,
						}
						that.address = obj.address
						uni.setStorageSync('address', obj)
						that.params.pageNum = 1
						that.newshopList = []
						that.hotshoplist = []
						that.params = Object.assign(that.params, obj)
						getnewsShop(that.params).then(res => {
							that.newshopList = res.rows
						})
						that.getshoplist()
						that.$nextTick(() => {
							setTimeout(() => {
								that.isshowimg = false
								that.isjump = true
							}, 1000)
						})
					},
					fail: function(error) {
						console.error(error);
					}
				})
			},
			//下拉
			onbottom() {
				this.params.pageNum++
				this.getshoplist()
			},
			//推荐商家 
			getshoplist() {
				gethotsShop(this.params).then(res => {
					this.hotshoplist.push(...res.rows)
					let total = Math.ceil(res.total / this.params.pageSize);
					this.nolist = total == 0
					this.istrue = false
				})
			},
			//跳转附近
			pagefj(code, index) {
				let obj = {
					code,
					index
				}
				uni.setStorageSync('fj', obj)
				uni.switchTab({
					url: `/pages/fj/fj`
				})
			},
			//查看更多
			change(e) {
				this.checkAll = !this.checkAll
				this.checkAll ? this.islength = 2 : this.islength = e
			},
			//跳转添加快捷地址
			pageaddcity() {
				if (uni.getStorageSync('userToken')) {
					uni.navigateTo({
						url: '/mainpage/addcity'
					})
					this.isshowpop = false
				} else {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				}
			},
			//跳转切换城市
			pagecity() {
				uni.navigateTo({
					url: '/mainpage/changecity'
				})
				this.isshowpop = false
			},
			//点击快捷地址
			changeAddress(item) {
				let obj = {
					address: item.address,
					longitude: item.longitude,
					latitude: item.latitude,
					province: item.province,
					city: item.city,
					// county:u.district,
				}
				this.address = item.address
				uni.setStorageSync('address', obj)
			},
			//轮播图跳转
			pagelingjuan(item) {
				if (item.jump == '1') {
					if (item.type == '内部') {
						uni.navigateTo({
							url: item.url
						})
					}
					if (item.type == '外部') {
						uni.navigateTo({
							url: `/mainpage/link?url=${item.url}`
						})
					}

				}
			},
			//跳转商品详情
			pageDetail(id, distance) {
				uni.navigateTo({
					url: `/mainpage/details?productid=${id}&&distance=${distance}`
				})
			},
			//打开待取餐
			openDaiqucan() {
				this.takeList = this.takeInfo.list
				this.$refs.popup.open()
			},
			//拿到id请求详情
			swiperChange(e) {
				this.current = e.detail.current
			},
			//打开确认取餐
			openQueren() {
				orderstake({
					id: this.takeList[this.current].id
				}).then(res => {
					if (res.code == 200) {
						ordersWaittake({
							latitude: uni.getStorageSync('address').latitude,
							longitude: uni.getStorageSync('address').longitude
						}).then(res => {
							if (res.code == 200) {
								this.istake = res.data.count > 0
								this.takeInfo = res.data
								this.$refs.popup.close()
								setTimeout(() => {
									this.$refs.popupyes.open()
									this.current = 0
								}, 500)
							}
						})
					}

				})
			},
			opents() {
				this.$refs.popupts.open()
			},
			close(type) {
				if (type == 1) {
					this.$refs.popup.close()
				} else if (type == 2) {
					this.$refs.popupyes.close()
				} else {
					this.$refs.popupaddress.close()
				}
			},

		}
	}
</script>

<style lang="scss">
	.twokong {
		width: 710rpx;
		background: #F3F3F3;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 20rpx auto;
		padding: 30rpx 20rpx;
		box-sizing: border-box;

		.tits {
			width: 430rpx;
			height: 72rpx;
			background: #000000;
			border-radius: 10rpx;
			margin: 0 auto;
		}

		.tit {
			text-align: center;
			line-height: 72rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;

			image {
				margin-right: 20rpx;
				width: 32rpx;
				height: 32rpx;
			}
		}

		.text {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #979797;
			line-height: 36rpx;
			margin-top: 20rpx;
		}
	}

	.popup {
		width: 630rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding: 42rpx 54rpx;
		box-sizing: border-box;
		// margin: 300rpx auto;

		.tit {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #000000;
			text-align: center;
		}

		.cont {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #000000;
			text-align: center;
			margin: 28rpx auto 32rpx;
		}

		.btnflex {
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			display: flex;
			justify-content: space-between;

			.btn {
				width: 240rpx;
				height: 92rpx;
				text-align: center;
				line-height: 92rpx;
			}

			.b1 {
				border: 1px solid #D9D9D9;
				color: #D9D9D9;
			}

			.b2 {
				background: #000000;
				color: #FFFFFF;
			}
		}
	}

	.pages {
		background: #23633D;
		width: 100%;
		height: 100vh;
		position: fixed;
		z-index: 99999999;
		display: flex;
		justify-content: center;
		align-items: center;

		image {
			width: 400rpx;
			height: 132rpx;
			display: block;
		}
	}

	.abssj {
		position: fixed;
		z-index: 9;
		color: #fff;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		height: 100vh;
		width: 100%;
		top: 0%;

		.abssjs {
			margin-left: 20rpx;
			width: 492rpx;
			background: rgba(0, 0, 0, 0.8);
			border-radius: 10rpx;
			position: relative;
			padding: 12rpx 0rpx;
			box-sizing: border-box;
		}

		.abssjs:after {
			content: "";
			border: 12rpx solid rgba(0, 0, 0, 0.8);
			border-top-color: transparent;
			border-right-color: transparent;
			border-bottom-color: rgba(0, 0, 0, 0.8);
			border-left-color: transparent;
			width: 0px;
			height: 0px;
			position: absolute;
			top: -24rpx;
			left: 100rpx;
		}

		.abss_1 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0rpx 12rpx;

			.flex_l {
				.items {
					width: 300rpx;
					margin-left: 6rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}

			.btn {
				height: 35rpx;
				background: #29A85C;
				border-radius: 10rpx;
				padding: 0rpx 10rpx;
				font-size: 20rpx;
				line-height: 35rpx;
			}
		}

		.abss_2 {
			margin-top: 15rpx;
			padding: 0rpx 12rpx;

			.items {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 15rpx;

				.test {
					width: 380rpx;
					margin-left: 6rpx;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
			}
		}

		.abss_3 {
			display: flex;
			border-top: 1px solid #FFFFFF;
			padding: 10rpx 12rpx 0rpx;

			.test {
				margin-left: 6rpx;
			}
		}
	}

	.addresskong {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		text-align: center;
		margin-top: 228rpx;

		image {
			width: 228rpx;
			height: 228rpx;
		}

		.t1 {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #000000;
			margin: 30rpx auto;
		}

		.t2 {
			width: 584rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #666666;
			text-align: left;
			margin: 0rpx auto;
		}

		.btn {
			width: 670rpx;
			height: 100rpx;
			background: #000000;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			text-align: center;
			line-height: 100rpx;
			color: #fff;
			margin: 30rpx auto;
		}
	}

	.content {
		overflow: auto;

		.swiper {
			width: 100%;
			height: 300rpx;

			.swiper-item {
				image {
					width: 100%;
					height: 300rpx;
				}
			}
		}

		.flexs {
			width: 100%;
			height: 180rpx;
			white-space: nowrap;
			flex-direction: row;
			padding: 20rpx;
			box-sizing: border-box;

			.x_item {
				display: inline-block;
				width: 100rpx;
				text-align: center;
				margin-right: 36rpx;

				image {
					width: 90rpx;
					height: 90rpx;
					transform: rotate(0deg);
				}

				.text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 26rpx;
					color: #000000;
				}
			}

			.x_item:active {
				image {
					transform: rotate(20deg);
					background-color: #C5FBC5;
					border-radius: 45rpx;
				}
			}
		}

		.newshop {
			padding: 20rpx 20rpx 0rpx 20rpx;
			box-sizing: border-box;
			border-top: 1px solid #FBFBFB;
			border-bottom: 1px solid #FBFBFB;

			.new_tit {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 10rpx;

				.new_l {
					display: flex;
					align-items: center;

					image {
						width: 36rpx;
						height: 36rpx;
					}

					.t1 {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 36rpx;
						color: #000000;
						margin: 0rpx 8rpx;
					}

					.t2 {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #979797;
						margin-top: 10rpx;
					}
				}

				.imgr {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.priceflexs {
				width: 100%;
				display: flex;
				align-items: center;

				.price_item {
					width: 280rpx;
					margin-right: 20rpx;
					margin-top: 30rpx;

					.img {
						width: 280rpx;
						height: 200rpx;
						position: relative;

						image {
							width: 280rpx;
							height: 200rpx;
							border-radius: 15rpx 15rpx 0rpx 0rpx;
						}

						.tip {
							position: absolute;
							top: 14rpx;
							left: 12rpx;
							height: 32rpx;
							background: #29A85C;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 20rpx;
							color: #FFFFFF;
							padding: 0 10rpx;
							line-height: 32rpx;
						}

						.time {
							position: absolute;
							bottom: 0%;
							width: 100%;
							height: 40rpx;
							background: rgba(0, 0, 0, 0.5);
							display: flex;
							align-items: center;
							justify-content: center;

							image {
								width: 24rpx;
								height: 24rpx;
								margin-right: 6rpx;
							}

							font-family: PingFang SC,
							PingFang SC;
							font-weight: 500;
							font-size: 20rpx;
							color: #FFFFFF;
						}

						.time1 {
							position: absolute;
							top: 0%;
							width: 100%;
							height: 200rpx;
							background: rgba(0, 0, 0, 0.5);
							border-radius: 15rpx;
							display: flex;
							justify-content: center;

							.tflex {
								width: 100%;
								position: absolute;
								bottom: 6rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								font-family: PingFang SC,
									PingFang SC;
								font-weight: 500;
								font-size: 20rpx;
								color: #FFFFFF;

								image {
									width: 24rpx;
									height: 24rpx;
									margin-right: 6rpx;
								}
							}

							.tflex1 {
								display: flex;
								align-items: center;
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 30rpx;
								color: #FFFFFF;

								image {
									width: 44rpx;
									height: 44rpx;
									margin-right: 6rpx;
								}
							}

						}
					}

					.text {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #000000;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						margin-top: 16rpx;
					}

					.block_flex {
						display: flex;
						justify-content: space-between;
						align-items: center;

						image {
							width: 28rpx;
							height: 28rpx;
							margin: 0rpx 6rpx;
						}

						.block_l {
							display: flex;
							align-items: center;

							.t1 {
								font-family: 'DINB';
								font-size: 32rpx;
								color: #000000;
							}

							.t2 {
								font-family: 'FINE';
								font-weight: 400;
								font-size: 24rpx;
								color: #979797;
							}

						}

						.block_r {
							font-family: 'FINE';
							font-weight: 400;
							font-size: 24rpx;
							color: #000000;
						}
					}

				}

				.ts {
					width: 50rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #000000;
					display: flex;
					align-items: center;
					margin-left: 10rpx;
				}
			}


		}

		.tj_shop {
			padding: 20rpx;
			box-sizing: border-box;

			.title {
				display: flex;
				align-items: center;
				margin-bottom: 20rpx;

				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 6rpx;
				}

				font-family: PingFang SC,
				PingFang SC;
				font-weight: bold;
				font-size: 36rpx;
				color: #000000;
			}

			.shop {
				width: 710rpx;
				padding: 22rpx 10rpx 1rpx;
				box-sizing: border-box;
				// background: linear-gradient(180deg, #FFF7EB 0%, #FFFFFF 41%);
				background: #F3F3F3;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				// border: 1rpx solid #FFF7ED;
				margin-bottom: 20rpx;

				.shoptit {
					display: flex;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #000000;
					align-items: center;

					.x {
						width: 3rpx;
						height: 35rpx;
						background-color: #000000;
						margin: 0rpx 10rpx;
					}

					.block_flex {
						flex: 1;
						display: flex;
						justify-content: space-between;
						align-items: center;

						image {
							width: 28rpx;
							height: 28rpx;
							margin: 0rpx 6rpx;
						}

						.block_l {
							display: flex;
							align-items: center;

							.t1 {
								font-family: 'DINB';
								font-size: 32rpx;
								color: #000000;
							}

							.t2 {
								font-family: 'FINE';
								font-weight: 400;
								font-size: 24rpx;
								color: #979797;
							}

						}

						.block_r {
							font-family: 'FINE';
							font-weight: 400;
							font-size: 24rpx;
							color: #000000;
						}
					}
				}

				.shopflex {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					margin-top: 20rpx;
				}

				.price_item {
					width: 340rpx;
					margin-bottom: 26rpx;

					.img {
						width: 340rpx;
						height: 200rpx;
						position: relative;

						image {
							width: 340rpx;
							height: 200rpx;
							border-radius: 15rpx;
						}

						.tip {
							position: absolute;
							top: 14rpx;
							left: 12rpx;
							height: 32rpx;
							background: #29A85C;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 20rpx;
							color: #FFFFFF;
							padding: 0 10rpx;
							line-height: 32rpx;
						}

						.time {
							position: absolute;
							bottom: 0%;
							width: 100%;
							height: 40rpx;
							background: rgba(0, 0, 0, 0.5);
							display: flex;
							align-items: center;
							justify-content: center;

							image {
								width: 24rpx;
								height: 24rpx;
								margin-right: 6rpx;
							}

							font-family: PingFang SC,
							PingFang SC;
							font-weight: 500;
							font-size: 20rpx;
							color: #FFFFFF;
							border-radius: 0rpx 0rpx 15rpx 15rpx;
						}

						.time1 {
							position: absolute;
							top: 0%;
							width: 100%;
							height: 200rpx;
							background: rgba(0, 0, 0, 0.5);
							border-radius: 15rpx;
							display: flex;
							justify-content: center;

							.tflex {
								width: 100%;
								position: absolute;
								bottom: 6rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								font-family: PingFang SC,
									PingFang SC;
								font-weight: 500;
								font-size: 20rpx;
								color: #FFFFFF;

								image {
									width: 24rpx;
									height: 24rpx;
									margin-right: 6rpx;
								}
							}

							.tflex1 {
								display: flex;
								align-items: center;
								font-family: PingFang SC, PingFang SC;
								font-weight: 500;
								font-size: 30rpx;
								color: #FFFFFF;

								image {
									width: 44rpx;
									height: 44rpx;
									margin-right: 6rpx;
								}
							}

						}
					}

					.text {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 30rpx;
						color: #000000;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						margin-top: 10rpx;
					}

					.tipflex {
						display: flex;
						align-items: center;

						.its {
							height: 44rpx;
							background: #F6F6F6;
							border-radius: 8rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #7B7B7B;
							line-height: 44rpx;
							padding: 0rpx 16rpx;
							margin: 10rpx 8rpx 0rpx 0rpx;
						}
					}

					.plun {
						display: flex;
						margin-top: 15rpx;

						image {
							display: block;
							width: 30rpx;
							height: 30rpx;
							border-radius: 15rpx;
							margin-right: 6rpx;
						}

						.tts {
							flex: 1;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 24rpx;
							color: #979797;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}
				}
			}

			.check {
				text-align: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #979797;
				line-height: 30rpx;
				margin-bottom: 20rpx;
			}

			.leg1rig {
				position: relative;

				image {
					width: 340rpx;
					height: 400rpx;
				}

				.tflex {
					position: absolute;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #A37D73;
					display: flex;
					align-items: center;
					top: 112rpx;
					left: 98rpx;
				}
			}
		}

		// .sc {
		// 	width: 200rpx;
		// 	height: 200rpx;
		// 	text-align: center;
		// 	margin: 100rpx;
		// 	position: relative;
		// 	background: #413224;
		// }

		// .sc::before {
		// 	content: '';
		// 	position: absolute;
		// 	width: 18px;
		// 	height: 18px;
		// 	transform: rotate(45deg);
		// 	background: #413224;
		// 	border-radius: 6rpx 0rpx 0rpx 0rpx;
		// 	top: -9px;
		// }


	}



	/* #ifdef MP-WEIXIN */
	// 默认指示点样式
	wx-swiper .wx-swiper-dot {
		position: relative;
		background-color: #F9F9F9;
		width: 10rpx;
		border-radius: 5rpx;
		height: 8rpx;
	}

	// 当前选中样式
	wx-swiper .wx-swiper-dot-active {
		background-color: #ffffff !important;
		width: 40rpx;
		border-radius: 10rpx;
	}

	/* #endif */
	.pop {
		position: fixed;
		right: 10rpx;
		bottom: 300rpx;

		.popflex {
			display: flex;
			width: 300rpx;
			position: relative;
		}

		image {
			width: 124rpx;
			height: 132rpx;
			position: relative;
			z-index: 1;
		}

		.texts {
			position: absolute;
			width: 216rpx;
			height: 92rpx;
			background: #29A85C;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			border: 2rpx solid #000000;
			right: 0%;
			bottom: 0%;
			padding: 0rpx 12rpx 0rpx 0rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;

			.t1 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;

				span {
					font-family: 'DINB';
					font-size: 30rpx;
					color: #000;
				}
			}

			.t2 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #FFFFFF;
				margin-top: 4rpx;

				span {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
					height: 32rpx;
					background: #000000;
					border-radius: 8rpx;
					margin-right: 4rpx;
					padding: 0rpx 6rpx;
				}
			}
		}
	}

	.popupcss {
		width: 100%;
		height: 839rpx;
		background-color: #FFFFFF;
		padding: 38rpx 40rpx;
		box-sizing: border-box;

		.imgabs {
			position: absolute;
			width: 140rpx;
			height: 146rpx;
			top: -80rpx;
			left: 46rpx;
		}

		.title {
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 30rpx;
			color: #000000;
		}

		.swiper {
			swiper {
				height: 600rpx;
			}

			.swiper-item {
				width: 100%;

				.imgpre {
					position: relative;
					margin: 40rpx auto;
					width: 416rpx;
					height: 251rpx;

					image {
						width: 416rpx;
						height: 251rpx;
					}

					.textpoa {
						text-align: center;
						position: absolute;
						width: 416rpx;
						height: 251rpx;
						padding: 24rpx;
						box-sizing: border-box;
						top: 0%;

						.t1 {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 28rpx;
							color: #000000;
						}

						.t2 {
							font-family: 'DINB';
							font-size: 80rpx;
							color: #000000;
						}

						.t3 {
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #23633D;
							line-height: 33rpx;
							margin-top: 40rpx;
						}
					}
				}

				.iconflex {
					display: flex;
					align-items: center;
					justify-content: space-between;

					image {
						width: 32rpx;
						height: 33rpx;
					}

					.left {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 30rpx;
						color: #000000;
						display: flex;
						align-items: center;

						image {
							margin-right: 6rpx;
						}
					}

					.right {
						image {
							margin-left: 30rpx;
						}
					}
				}

				.flex1 {
					display: flex;
					align-items: center;
					width: 670rpx;
					height: 68rpx;
					background: #F3F3F3;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #000000;
					justify-content: space-between;
					padding: 0rpx 20rpx;
					box-sizing: border-box;
					margin: 20rpx auto;

					image {
						width: 32rpx;
						height: 33rpx;
					}
				}

				.address {
					width: 670rpx;
					background: #F3F3F3;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #000000;
					padding: 15rpx 20rpx;
					box-sizing: border-box;
					margin: 20rpx auto;
				}
			}
		}

		.btnflex {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 30rpx;

			.btn {
				width: 320rpx;
				height: 92rpx;
				background: #F3F3F3;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				text-align: center;
				line-height: 92rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
			}

			.b2 {
				background: #000000;
				color: #fff;
			}
		}
	}

	.popupyes {
		width: 692rpx;

		.images {
			width: 692rpx;
			height: 576rpx;
			position: relative;

			image {
				width: 692rpx;
				height: 576rpx;
			}

			.imageabs {
				width: 480rpx;
				height: 450rpx;
				position: absolute;
				top: 80rpx;
				box-sizing: border-box;
				left: 100rpx;
				text-align: center;

				image {
					width: 144rpx;
					height: 96rpx;
					margin: 40rpx auto 10rpx;
				}

				.t1 {
					font-family: PingFang SC, PingFang SC;
					font-weight: 800;
					font-size: 28rpx;
					color: #000000;
				}

				.ts {
					width: 380rpx;
					height: 40rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #000000;
					margin: 20rpx auto;
					position: relative;

					.we {
						position: absolute;
						z-index: 9;
						left: 20rpx;

						span {
							font-weight: bold;
							font-size: 28rpx;
						}
					}

					.t {
						width: 380rpx;
						height: 12rpx;
						background: #38CDA5;
						border-radius: 6rpx 6rpx 6rpx 6rpx;
						position: absolute;
						bottom: 0rpx;
					}
				}

				.btn {
					width: 280rpx;
					height: 92rpx;
					background: #000000;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 92rpx;
					margin: 80rpx auto;
				}

			}
		}

		.close {
			text-align: center;
		}
	}
</style>